<template>
	<div class="modile-search">
		<div class="f">
			<router-link to="/mobile/home" style="margin-left: 0.9375rem;margin-top: 2.5rem;"><i
					class="el-icon-arrow-left"></i></router-link>
			<form @submit.prevent="setSearch()">
				<el-input type="search" placeholder="请输入书名,作者,出版社" required v-model="keywords.key" />
				<el-input type="submit" value="搜索" />
			</form>
		</div>
		<div class="history">
			<div class="remove">
				<h5>历史搜索</h5>
				<el-button @click="remove()"><i class="el-icon-delete"></i></el-button>
			</div>
			<div class="removerr">
				<span v-for="(item,i) in hlist" :key="i">
					<div class="hotfind">
						{{item}}
					</div>
				</span>
			</div>
		</div>
		<br />
		<div class="bigbooks">
			<h3>搜索结果</h3>
			<span v-for="item in list">
				<router-link :to="`/mobile/booksdetail/${item.id}`" style="color: #000000;">
					<div class="books">
						<img :src="`${$ip}/api/public/showimg/${item.pic}`" min-width="70" height="70" />
						<h5>{{item.name}}</h5>
						<h5>{{item.maker}}</h5>
						<h5>{{item.author}}</h5>
					
					</div>
				</router-link>
			</span>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'MobileSearch',
		data() {
			return {
				keywords: {},
				historyList: [],
				list: []
			}
		},
		computed: {
			...mapState('search', ['hlist']),
		},

		methods: {
			//  格式: mapActions('模块名'['调用模块内的方法'])
			...mapActions('search', ['actionHistory']),
			...mapActions('search', ['removeList']),
			setSearch() {
				// 调用 search 模块的函数 actionHistory 并将当前组件的data 数据传递过去 vuex
				this.actionHistory(this.keywords.key);
				console.log(this.keywords);
				this.$postkv("/api/public/book/findPageKey/1/3", this.keywords).then((resp) => {
					console.log(resp.data.data.books);
					this.list = resp.data.data.books;
					console.log(this.list);
				})
			},

			remove() {
				this.removeList();
			},
			jump() {

			}
		}

	}
</script>

<style>
	.f {
		margin-top: -3.5rem;
		height: 6.25rem;
		background-color: #f6f6f6;
		display: flex;
	}

	.f input {
		font-family: KaiTi;
		margin-top: 2rem;
		margin-left: 1rem;
		border-radius: 1.25rem;
		border: none;
	}

	.f input[type="submit"] {
		position: relative;
		width: 3.625rem;
		height: 1.875rem;
		border: none;
		top: -4.375rem;
		background-color: #f6f6f6;
		left: 18.125rem;
	}

	.history h5 {
		font-family: KaiTi;
		margin-top: 1.25rem;
		font-size: 1.25rem;
		margin-left: 1.25rem;
	}

	.hotfind {
		background-color: #f6f6f6;
		margin-top: 0.625rem;
		/* 宽度自适应 */
		width: fit-content;
		font-size: 0.9375rem;
		margin-left: 3.125rem;
		border-radius: 1.25rem;
		font-family: KaiTi;

	}

	.remove {

		display: flex;

	}

	.remove button {
		margin-left: 59%;
		border: none;
		margin-top: 0.625rem;
	}

	.removerr {
		flex-wrap: wrap;
		display: flex;

	}

	.bigbooks {
		width: 90%;
		margin: 0 auto;
		position: relative;
		top: 6.25rem;
		font-family: KaiTi;
	}

	.bigbooks h3 {
		font-size: 1.25rem;
	}

	.books {
		margin-top: 2.5rem;

	}

	.books img {
		width: 4.375rem;
		height: 5rem;
	}

	.books h5 {
		position: relative;
		left: 5rem;
		top: -5.3125rem;
		line-height: 20px;
	}

	.books p {
		font-size: 0.8125rem;
		position: relative;
		left: 5rem;
		top: -4.8rem;
	}
</style>
